<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>modal模态框</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
   <div class="btn-ground">
      <button class="btn-modal">点我-弹框</button>   	
   </div> 

   <div id="modal-1" class="modal-dialog">
     <div class="cover"></div>
     <div class="modal-ct">
     	<div class="header">
     		<h3>这是一个浮出层</h3>
     		<a class="close" href="#">x</a>
     	</div>
     	<div class="content">
     		<p>这是一个浮出层的内容</p>
     	</div>
     	<div class="footer">
     		<a class="btn btn-confirm" href="#">确定</a>
     		<a class="btn btn-cancle" href="#">取消</a>
     	</div>
     </div>
   	
   </div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js" ></script>
<script type="text/javascript">

  var $btn = $('.btn-modal'),
      $modal = $('#modal-1'),
      $modalCt = $('#modal-1 .modal-ct'),
      $close = $('.close'),
      $btnCancle = $('.btn-cancle');

  	$btn.on('click',function(e){
  		e.stopPropagation();
  		showModal($modal);
  	});

/*  	$modalCt.on('click',function(e){
  		e.stopPropagation();
  		if ($modalCt.hasClass('close') || e.target.className = 'btn-cancel') {
  			hideModal($modal);
  		}
  	})*/;

  	$close.on('click',function(e){
  		e.stopPropagation();
  		hideModal($modal);
  	});

  	$btnCancle.on('click',function(e){
  		e.stopPropagation();
  		hideModal($modal);
  	});

/*  	$('body').on('click',function(){
  		hideModal($modal);
  	});*/

  	function showModal($modal){
  		$modal.show();
  	}

  	function hideModal($modal){
  		$modal.hide();
  	}

/*  	function hasClass(ele,cls){
  		return !!ele.className.match(new RegExp('\\b' + cls + '\\b'));
  	}*/


</script>

</body>
</html>